<template>
	<div class="panel" v-if="newGoodsList&&newGoodsList.length>0">
		<div class="panel-title">
			<h3>最新上架</h3>
			<router-link class="font-12 txt-disable" replace :to="'/shop/search?shopId='+shopId">更多 <van-icon name="arrow"/></router-link>
		</div>
		<div class="panel-main">
			<ul class="new-goods-list">
				<li v-for="item in newGoodsList" key="item.gdsId">
					<router-link :to="{path:'/goods/detail',query:{gdsId:item.gdsId}}"><van-image :src="item.gdsImg" lazy-load/></router-link>
					<router-link :to="{path:'/goods/detail',query:{gdsId:item.gdsId}}" class="goods-name">{{item.gdsName}}</router-link>
					<div class="price" v-if="item.agentPrice"><small>￥</small><b>{{fen2Yuan(item.agentPrice as number)}}</b></div>
					<div class="price" v-else><small>￥</small><b>{{fen2Yuan(item.guidePrice as number)}}</b> <small>指导价</small> </div>
				</li>
			</ul>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.panel{

}
.new-goods-list{
	display:flex;padding:0;margin:0 -10px -10px 0; flex-wrap:wrap;
	font-size:12px;
	&>li{
		display:block;margin:0 10px 10px 0; border-radius: 8px;overflow:hidden; width:calc((100vw - 72px)/3);
		text-align: center;
		a{display:block;}
		.van-image,img{width:100%;height:100%; aspect-ratio: 1;border-radius: 8px;overflow:hidden;}
		.goods-name{
			margin:4px 0 0;
			height:28px;
			text-overflow: ellipsis;
			overflow: hidden; line-height:14px;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			color:var(--font-first-color);
			&:hover{color:var(--van-primary-color)}
		}
		.price{
			margin-top:4px;
			color:var(--van-primary-color);
			b{font-size:14px;}
			small{transform:scale(0.9)}
		}
	}
}
</style>
<script lang="ts" setup>
//所有的a链接，一期暂时用a标签，后期要改成router-link
import {fen2Yuan} from "@/utils/validate";

//props
const props=defineProps({
	shopId:{
		type:String,
		required:true,
	},
})
const domain = import.meta.env.VITE_DOMAIN
//左下：最新上架
const newGoodsList = ref(<Array<any>>[])  //最新上架只加载最近半年内最多6个上架商品
newGoodsList.value = [
	{
		gdsId:'1254266',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1254270',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生 小象智能家庭医生 小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
	{
		gdsId:'1227867',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227868',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},
	{
		gdsId:'1227869',
		gdsImg:'https://www.woego.cn/woego/image/622aaf5a75e50b69f7a2b40d_140x140!.jpg',
		gdsName:'Apple iPhone 13 Pro Max',
		agentPrice:530000,
		guidePrice:580000,
	},

	{
		gdsId:'1254271',
		gdsImg:'https:www.woego.cn/woego/image/6449d39e2b608d0a734b9585_140x140!.jpg',
		gdsName:'小象智能家庭医生',
		agentPrice:43000,
		guidePrice:48000,
	},
]
</script>